<template>
  <div class="playlists-container">
    <!-- 同步 -->
    <div class="top-card">
      <div class="icon-wrap">
        <img :src="topList.coverImgUrl" alt />
      </div>
      <div class="content-wrap">
        <div class="tag">精品歌单</div>
        <div class="title">{{topList.name}}</div>
        <div class="info">{{topList.description}}</div>
      </div>
      <img :src="topList.coverImgUrl" alt class="bg" />
      <div class="bg-mask"></div>
    </div>
    <div class="tab-container">
      <!-- tab栏 顶部 -->
      <div class="tab-bar">
        <span class="item" @click="cat='全部'" :class="{active:cat=='全部'}">全部</span>
        <span class="item" @click="cat='欧美'" :class="{active:cat=='欧美'}">欧美</span>
        <span class="item" @click="cat='华语'" :class="{active:cat=='华语'}">华语</span>
        <span class="item" @click="cat='流行'" :class="{active:cat=='流行'}">流行</span>
        <span class="item" @click="cat='说唱'" :class="{active:cat=='说唱'}">说唱</span>
        <span class="item" @click="cat='摇滚'" :class="{active:cat=='摇滚'}">摇滚</span>
        <span class="item" @click="cat='民谣'" :class="{active:cat=='民谣'}">民谣</span>
        <span class="item" @click="cat='电子'" :class="{active:cat=='电子'}">电子</span>
        <span class="item" @click="cat='轻音乐'" :class="{active:cat=='轻音乐'}">轻音乐</span>
        <span class="item" @click="cat='影视原声'" :class="{active:cat=='影视原声'}">影视原声</span>
        <span class="item" @click="cat='ACG'" :class="{active:cat=='ACG'}">ACG</span>
        <span class="item" @click="cat='怀旧'" :class="{active:cat=='怀旧'}">怀旧</span>
        <span class="item" @click="cat='治愈'" :class="{active:cat=='治愈'}">治愈</span>
        <span class="item" @click="cat='旅行'" :class="{active:cat=='旅行'}">旅行</span>
      </div>
      <!-- tab的内容区域 -->
      <div class="tab-content">
        <div class="items">
          <div class="item" v-for="(item,index) in playlists" :key="index">
            <div class="img-wrap">
              <div class="num-wrap">
                播放量:
                <span class="num">{{item.playCount}}</span>
              </div>
              <img :src="item.coverImgUrl" alt />
              <span class="iconfont icon-play" @click="toMusicList(item.id)"></span>
            </div>
            <p class="name">{{item.name}}</p>
          </div>
        </div>
      </div>
    </div>
    <!-- 分页器 -->
    <el-pagination
      @current-change="handleCurrentChange"
      background
      layout="prev, pager, next"
      :total="total"
      :current-page="page"
      :page-size="pageSize"
    ></el-pagination>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "recommend",
  data() {
    return {
      cat: "全部",
      // 总条数
      total: 100,
      // 页码
      page: 1,
      pageSize: 10,
      // 精品歌单
      topList: {},
      // 歌单
      playlists: [],
    };
  },

  methods: {
    // 分页
    handleCurrentChange(val) {
      this.page = val;
    },
    loadSongSheet() {
      axios({
        url: "/autumnfish/top/playlist/",
        method: "get",
        params: {
          limit: this.pageSize,
          offset: (this.page - 1) * this.pageSize,
          cat: this.cat,
        },
      }).then((res) => {
        this.total = res.data.total;
        this.playlists = res.data.playlists;
      });
    },
    toMusicList(id) {
      this.$router.push("/musicList?id=" + id);
    },
  },
  // 侦听器
  watch: {
    // 当页数发生变化时发送ajax请求获取下一页的歌单数据
    page() {
      this.loadSongSheet();
    },
    // 当分类发生变化时发送ajax请求获取当前分类的歌单数据
    cat() {
      this.page = 1;
      this.loadSongSheet();
    },
  },
  created() {
    // 顶部精品歌单
    axios({
      url: "/autumnfish/top/playlist/highquality",
      method: "get",
      params: { cat: "全部", limit: 1 },
    }).then((res) => {
      this.topList = res.data.playlists[0];
    });

    // 首次加载时的全部歌单
    this.loadSongSheet();
  },
};
</script>

<style >
</style>
